<template>
  <div>
          <el-header style="box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;border-radius:6px;padding:20px;height:56px">
          <div class="flexBox" >
              <el-breadcrumb separator="/">
                  <el-breadcrumb-item :to="{ path: '/home' }"
                  >首页</el-breadcrumb-item>
                  <el-breadcrumb-item>人事调动</el-breadcrumb-item>
                  <el-breadcrumb-item>转科管理</el-breadcrumb-item>
                  <el-breadcrumb-item>修改计划</el-breadcrumb-item>
              </el-breadcrumb>
          </div>
        </el-header >
        <el-main style="box-shadow: rgba(0, 0, 0, 0.05) 0 2px 20px 0.5px;border-radius:6px;padding:20px;margin-top:20px">
            <el-row :gutter="0" type="flex" justify="space-between">
              <label class="el-form-item__label"><i class="el-icon-user-solid" style="color: #3a8ee6"></i>{{ data.name }}</label>
                <label class="el-form-item__label">科室：<el-tag type="info">{{ data.dept }}</el-tag></label>
                <label class="el-form-item__label">片区：<el-tag type="warning">{{ data.dept }}</el-tag></label>
            </el-row>
            <el-divider></el-divider>
            <div class="el-form-item__label">转科档案
              <el-button size="mini" type="primary" style="margin-left:20px">批量停止</el-button>
              <el-button size="mini" type="primary">批量删除</el-button>
            </div>
            <div style="float:right">
               <el-button type="primary" style="margin-bottom:10px" @click="save" size="mini">保存</el-button>
               <el-button style="margin-bottom:10px;" @click="cancel" size="mini">返回</el-button>
               <el-date-picker size="mini" style="width:100px" type="year" v-model="time" @change="handleDateChange"></el-date-picker>
            </div>
            <div style="clear:both"></div>
            <el-divider></el-divider>
             <el-table
                v-loading="showTable"
                :data="tableData"
                border
                style="width: 100%;margin-top:20px"
                :header-cell-style="{ background: 'rgb(245,247,250)' }"
                >
                <el-table-column
                  fixed="left"
                  type="selection"
                  align="center">
                </el-table-column>
                <el-table-column
                  label="时间"
                  align="center"
                  width="200">
                  <template slot-scope="scope">
                    <span>{{scope.row.start_date}}~{{scope.row.end_date}}</span>
                  </template>
                </el-table-column>
                  <el-table-column
                  label="科室"
                  prop="dept"
                  align="center"
                  width="200">
                </el-table-column>
                <el-table-column
                  label="职务"
                  prop="duties"
                  align="center"
                  width="120">
                </el-table-column>
                <el-table-column
                  label="层级"
                  prop="level"
                  align="center"
                  width="100">
                </el-table-column>
<!--                <el-table-column-->
<!--                  label="职称"-->
<!--                  prop="title"-->
<!--                  align="center"-->
<!--                  width="100">-->
<!--                </el-table-column>-->
                <el-table-column
                  label="科室考评"
                  align="center"
                  width="120">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.evaluate=='0'" type="success">优秀</el-tag>
                    <el-tag v-if="scope.row.evaluate=='1'" >良好</el-tag>
                    <el-tag v-if="scope.row.evaluate=='2'" type="warning">及格</el-tag>
                    <el-tag v-if="scope.row.evaluate=='3'" type="danger">不及格</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  label="状态"
                  align="center">
                    <template slot-scope="scope">
                      <el-tag disable-transitions type="info" v-if="scope.row.state=='0'">未开始</el-tag>
                      <el-tag disable-transitions v-if="scope.row.state=='1'">进行中</el-tag>
                      <el-tag disable-transitions type="warning" v-if="scope.row.state=='2'">待考评</el-tag>
                      <el-tag disable-transitions type="info" v-if="scope.row.state=='3'">已停止</el-tag>
                      <el-tag disable-transitions type="success" v-if="scope.row.state=='4'">已完成</el-tag>
                    </template>
                </el-table-column>
               <el-table-column width="200" fixed="right" prop="control" label="操作" align="center">
                  <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        @click="handleShow(scope.$index, scope.row)">修改</el-button>
                      <el-button
                        size="mini"
                        type="text"
                        @click="handleStop(scope.$index, scope.row)">停止</el-button>
                        <el-button
                        size="mini"
                        type="text"
                        @click="handleEx(scope.$index, scope.row)">考评</el-button>
                      <el-button
                        size="mini"
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
               </el-table-column>
              </el-table>
             <el-dialog :visible.sync="showConfig" :append-to-body="true" title="修改" width="30%">
               <el-form :model="form1" label-position="left" label-width="80px">
                 <el-form-item label="开始时间" :label-width="formLabelWidth">
                   <el-date-picker
                     v-model="form1.start_date"
                     type="date"
                     value-format="yyyy-MM-dd"
                     placeholder="选择日期">
                   </el-date-picker>
                 </el-form-item>
                 <el-form-item label="结束时间" :label-width="formLabelWidth">
                   <el-date-picker
                     v-model="form1.end_date"
                     type="date"
                     value-format="yyyy-MM-dd"
                     placeholder="选择日期">
                   </el-date-picker>
                 </el-form-item>
                 <el-form-item label="科室" :label-width="formLabelWidth">
                   <el-select v-model="form1.dept" placeholder="请选择">
                     <el-option
                       v-for="item in deptList"
                       :key="item[0]"
                       :label="item[0]"
                       :value="item[0]">
                     </el-option>
                   </el-select>
                 </el-form-item>
               </el-form>
               <div slot="footer">
                 <el-button size="mini" @click="showConfig = false">取 消</el-button>
                 <el-button size="mini" type="primary" @click="submitConfig">确 定</el-button>
               </div>
             </el-dialog>
             <el-dialog :visible.sync="showExam" :append-to-body="true" title="考评" width="30%">
               <el-form label-position="left" label-width="80px">
                 <el-form-item label="科室考评" :label-width="formLabelWidth">
                   <el-radio-group v-model="form2">
                     <el-radio-button label="优秀" :value="0"></el-radio-button>
                     <el-radio-button label="良好" :value="1"></el-radio-button>
                     <el-radio-button label="及格" :value="2"></el-radio-button>
                     <el-radio-button label="不及格" :value="3"></el-radio-button>
                   </el-radio-group>
                 </el-form-item>
               </el-form>
               <div slot="footer">
                 <el-button size="mini" @click="showExam = false">取 消</el-button>
                 <el-button size="mini" type="primary" @click="submitExam">确 定</el-button>
               </div>
             </el-dialog>
<!--             <el-dialog :visible.sync="showStop" :append-to-body="true" title="停止" width="30%">-->
<!--              <el-form label-position="top" label-width="80px">-->
<!--                <el-form-item label="停止原因" :label-width="formLabelWidth">-->
<!--                  <el-input type="textarea"></el-input>-->
<!--                </el-form-item>-->
<!--              </el-form>-->
<!--              <div slot="footer">-->
<!--                <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--                <el-button type="primary" @click="submitExam">确 定</el-button>-->
<!--              </div>-->
<!--            </el-dialog>-->

        </el-main>
  </div>
</template>
<script>
import TaskManager from '../service/TaskManager'
export default {
  name: 'confTurn',
  data () {
    return {
      formLabelWidth:"120px",
      form1:{
        start_date:"",
        end_date:"",
        dept:""
      },
      info:{},
      form2:"",
      value1:"",
      showConfig:false,
      showStop:false,
      showExam:false,
      time:"",
      showTable:false,
      data:{},
      tableData:[],
      deptList:[],
      row:{}
    }
  },
  methods:{
    handleDelete(index,row){
      this.row=row;
      this.$confirm('确定从列表中删除这条记录吗？', '提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type:"warning"
      }).then(() => {
        let params={
          status:3,
          id:this.row.tempId,
        }
        TaskManager.ConfigTurnList(params).then(res=>{
          if(res.data=='success'){
            this.$message({
              type:"success",
              message:"删除成功！"
            })
            this.loadList();
          }
        })
      })
    },
    handleStop(index,row){
      // this.showStop=true;
      this.row=row;
      this.$confirm('确定停止这条记录吗？', '提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type:"warning"
      }).then(() => {
        let params={
          status:1,
          id:this.row.tempId,
        }
        TaskManager.ConfigTurnList(params).then(res=>{
          if(res.data=='success'){
            this.$message({
              type:"success",
              message:"状态修改成功！"
            })
            // this.showStop=false;
            this.loadList();
          }
        })
      })
    },
    handleShow(index,row){
      // TaskManager.getOption({name:'科室',ryxz:0}).then((res)=>{
      //   console.log(res);
      //   this.deptList=res.data;
      // })
      // console.log(row,"row")
      this.row=row;
      this.form1.start_date=row[2]
      this.form1.end_date=row[3]
      this.form1.dept=row[5]
      this.showConfig=true;
    },
    handleEx(index,row){
      this.row=row;
      this.showExam=true;
    },
    saveInfo(){

    },
    submitExam(){
      console.log(this.form2);
      let params={
        status:2,
        id:this.row.tempId,
        evaluate:this.form2=="优秀"?0:(this.form2=="良好"?1:(this.form2=="及格"?2:3))
      }
      TaskManager.ConfigTurnList(params).then(res=>{
        if(res.data=='success'){
          this.$message({
            type:"success",
            message:"考评修改成功！"
          })
          this.showExam=false;
          this.loadList();
        }
      })
    },
    submitConfig(){
      console.log(this.form1);
      let params={
        status:0,
        id:this.row.tempId,
        dept:this.form1.dept,
        start_date: this.form1.start_date,
        end_date: this.form1.end_date
      }
      TaskManager.ConfigTurnList(params).then(res=>{
        if(res.data=='success'){
          this.$message({
            type:"success",
            message:"编辑修改成功！"
          })
          this.showConfig=false;
          this.loadList();
        }
      })
    },
    save(){

    },
    cancel(){
      this.$confirm('是否返回上一级', '提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({}) => {
        this.$router.go(-1);
      })
    },
    loadList(){
      this.showTable=true;
      this.data=JSON.parse(window.sessionStorage.turnInfo);
      console.log(this.data);
      TaskManager.getTurnList({id:this.data.id}).then((res)=>{
        this.tableData=res.data;
        this.showTable=false;
      })
    },
    handleDateChange(){
      this.loadList();
    }
  },
  mounted() {
    this.loadList();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-button+.el-button{
  margin-left: 0;
}
</style>
